<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% String path = request.getContextPath(); %>
<html>
<head>
    <title>nucleic</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="icon" href="<%=path%>/images/favicon.ico" sizes="32x32"/>
    <link rel="stylesheet" href="<%=path%>/css/font.css">
    <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/js/jquery-1.3.2.min.js"></script>
    <script src="<%=path%>/lib/layui/layui.js"></script>
    <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
    <script src="<%=path%>/layui_exts/excel.js"></script>
    <style type="text/css">
        .layui-table {
            text-align: center;
        }

        .layui-table th {
            text-align: center;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
       <a href="">首页</a>
        <a href="<%=path%>/resident/findResident">查询列表</a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="<%=path%>/rubbish/findRubbish" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="<%=path%>/rubbish/findRubbish">
            <input class="layui-input" type="hidden" name="pageIndex" value="1">
            <input class="layui-input" type="hidden" name="pageSize" value="5">
        </form>
    </div>
    <xblock>
        <button id="addRubbishBtn" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据：${pageList.totalCount} 条</span>
    </xblock>


    <%--表格数据--%>
    <table class="layui-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>分类名称</th>
            <th>价格</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageList.list}" var="di">
            <tr>
                <th>${di.code}</th>
                <th>${di.name}</th>
                <th>${di.price}</th>
                <th>${di.createtimeStr}</th>
                <td>
                    <a title="查看或编辑" onclick="rubbishEditBtn('${di.id}','${di.code}','${di.name}','${di.price}')" href="#">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" onclick="member_del(this,'${di.id}')" href="javascript:;">
                        <i class="layui-icon">&#xe640;</i>
                    </a>

                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <div class="">
        <input type="hidden" id="totalPageCount" value="${pageList.pageTotalCount}"/>
        <c:import url="pageBtn.jsp">
            <c:param name="totalCount" value="${pageList.totalCount}"/>
            <c:param name="currentPageNo" value="${pageList.pageIndex}"/>
            <c:param name="totalPageCount" value="${pageList.pageTotalCount}"/>
        </c:import>
    </div>

    <%--更新--%>
    <div class="layui-row" id="edit" style="display: none;">
        <div class="layui-col-md10">
            <form class="layui-form" id="editResidentForm">
                <div style="margin-top: 20px;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">编码：</label>
                    <div class="layui-input-block">
                        <input type="text" id="code" name="code" class="layui-input"
                               placeholder="垃圾分类名称">
                        <input type="hidden" id="id" name="id">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">垃圾分类名称：</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" readonly name="name" class="layui-input"
                               placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格：</label>
                    <div class="layui-input-block">
                        <input type="text" id="price" name="price" class="layui-input"
                               placeholder="垃圾单价">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formEditDemo">
                            提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="layui-row" id="save" style="display: none;">
        <div class="layui-col-md10">
            <form class="layui-form" id="saveRubbishForm">
                <div style="margin-top: 20px;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">编码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" class="layui-input"
                               placeholder="垃圾分类名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">垃圾分类名称：</label>
                    <div class="layui-input-block">
                        <input type="text" readonly name="name" class="layui-input"
                               placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格：</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" class="layui-input"
                               placeholder="垃圾单价">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formSaveDemo">
                            提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script>
        layui.config({
            base: 'layui_exts/',
        });

        layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
            var form = layui.form,
                $ = layui.jquery,
                laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });
            form.verify({
                // loginName: function (value, item) {
                //     //value：表单的值、item：表单的DOM对象
                //     if (!new RegExp("^(.+){4,18}$").test(value)) {
                //         return '用户名长度必须为4-18位'
                //     }
                //     if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                //         return '用户名不能有特殊字符';
                //     }
                //     if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                //         return '用户名首尾不能出现下划线\'_\'';
                //     }
                //     if (/^\d+\d+\d$/.test(value)) {
                //         return '用户名不能全为数字';
                //     }
                // },
                // password: function (val, item) {
                //     if (!/^.{6,16}$/.test(val)) {
                //         return '密码6到16位'
                //     }
                // },
                // phone: function (val, item) {
                //     if (!/^1[3|4|5|7|8][0-9]{9}$/.test(val)) {
                //         return '手机号格式错误'
                //     }
                // },
                // idcard: function (val, item) {
                //     if (!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) {
                //         return '身份证格式错误'
                //     }
                // }
            });
            /*添加弹出框*/


        });

        /*编辑*/
        function rubbishEditBtn(id,code,name,price) {

            layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
                var form = layui.form, $ = layui.jquery;
                layer.open({
                    type: 1,
                    title: "编辑",
                    skin: "myclass",
                    area: ["50%"],
                    anim: 2,
                    content: $("#edit"),
                    success: function () {
                    }
                });
                $("#editResidentForm")[0].reset();
                document.getElementById("id").value = id;
                document.getElementById("code").value = code;
                document.getElementById("name").value = name;
                document.getElementById("price").value = price;
                form.on('submit(formEditDemo)', function (data) {
                    var param = data.field;
                    $.ajax({
                        url: '<%=path%>/rubbish/updateRubbish',
                        type: "post",
                        data: JSON.stringify(param),
                        contentType: "application/json; charset=utf-8",
                        success: function (res) {
                            layer.msg('修改成功', {icon: 1, time: 3000});
                            setTimeout(function () {
                                window.location.href = '<%=path%>/rubbish/findRubbish';
                            }, 2000);
                        },
                        error: function () {
                            layer.msg('修改失败', {icon: 0, time: 3000});
                            setTimeout(function () {
                                window.location.href = '<%=path%>/rubbish/findRubbish';
                            }, 2000);
                        }
                    });
                });
            });
        }


        /*删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $.get("<%=path%>/rubbish/deleteRubbish", {"id": id}, function (data) {
                    if (data = true) {
                        layer.msg('删除成功!', {icon: 1, time: 2000});
                        setTimeout(function () {
                            window.location.href = '<%=path%>/rubbish/findRubbish';
                        }, 2000);

                    } else {
                        layer.msg('删除失败!', {icon: 1, time: 2000});
                        setTimeout(function () {
                            window.location.href = '<%=path%>/rubbish/findRubbish';
                        }, 2000);
                    }
                });
            });
        }


    </script>
</body>
</html>
